<template>
    <div class="header sticky-top" :class="navbar" :style="background">
      <b-container>
        <b-row class="clearfix">
          <b-col class="col-md-12">
            <b-navbar toggleable="lg" type="dark" :style="background">
              <b-navbar-brand class="header-logo d-flex justify-content-center" :to="header.logo.path">
                {{header.logo.name}}
              </b-navbar-brand>
              <b-navbar-toggle target="nav-collapse" />
              <b-collapse class="header-context" id="nav-collapse" is-nav>
                <b-navbar-nav class="ml-md-5 d-flex justify-content-center">
                  <b-nav-item v-for="menu in header.menus"
                    :key="menu.id"
                    :to="menu.path"
                    class="mr-md-3 d-flex justify-content-center align-items-center"
                  >
                    <!-- <span class="iconfont d-lg-none d-block mr-2">&#xe605;</span> -->
                    <svg-icon v-if="menu.icon" :icon-class="menu.icon" />
                    {{menu.name}}
                  </b-nav-item>
                </b-navbar-nav>
              </b-collapse>
            </b-navbar>
          </b-col>
        </b-row>
      </b-container>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'HomeHeader',
  props: {
    header: Object
  },
  data () {
    return {
      navbar: '',
      background: {
        'background-color': '',
        'padding': 0
      }
    }
  },
  methods: {
    handleScroll () {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollTop > 45) {
        this.navbar = 'shadow'
      } else {
        this.navbar = ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ])
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
    const color = this.getBackground
    this.background.backgroundColor = color
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped lang="stylus">
  .svg-icon
    font-size 16px
    margin-right 4px

  .navbar-dark
    .navbar-toggler
      font-size 14px
    .navbar-nav
      .nav-link
        display flex
        color #FFF
        align-items center
      .nav-link:hover
        color hsla(0,0%,100%,.5)

  .header
    margin-bottom 14px
    .header-logo
      font-size 20px
      font-weight 700
      line-height 50px
    .header-context
      .iconfont
        font-size 14px
        font-weight 400
        line-height 24px
</style>
